<template>
  <Transition @enter="onEnter" @leave="onLeave" mode="out-in">
    <slot>123</slot>
    <!-- 向内传递插槽内容 -->
  </Transition>
</template>

<script setup>
import gsap from "gsap";
//js动画通常使用gsap动画库
const onEnter = (el, done) => {
  gsap.set(el, {
    scaleX: 0.25,
    scaleY: 0.25,
  });
  gsap.to(el, {
    duration: 1,
    scaleX: 1,
    scaleY: 1,
    ease: "elastic.inOut(2.5, 1)",
    onComplete: done,
  });
};
const onLeave = (el, done) => {
  gsap.to(el, {
    duration: 0.7,
    translateX: 300,
    ease: "elastic.inOut(2.5, 1)",
  });
  gsap.to(el, {
    duration: 0.2,
    delay: 1,
    opacity: 0,
    onComplete: done,
  });
};
</script>
<style scoped>
.color2 {
  background: #42b883;
  margin-top: 20px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
</style>